<template>
  <div>
    <el-card class="box-card" shadow="hover">
        <!-- 搜索表单-->
        <el-form :model="queryParams" ref="queryForm" :inline="true">
            <el-form-item label="名称" >
                <el-input
                v-model="queryParams.userName"
                placeholder="请输入名称"
                clearable
                size="small"
                style="width: 240px"
                @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="电话" >
                <el-input
                v-model="queryParams.phonenumber"
                placeholder="请输入电话"
                clearable
                size="small"
                style="width: 240px"
                @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="注册日期">
                <el-date-picker
                v-model="date"
                size="small"
                style="width: 240px"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                ></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <!--user列表-->
        <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
        prop="userId"
        label="id"
        align="center">
        </el-table-column>
        <el-table-column
        prop="userName"
        label="名称"
        align="center">
        </el-table-column>
        <el-table-column
        prop="avatar"
        align="center"
        label="头像">
          <template slot-scope="scope">
            <img v-if="scope.row.avatar" :src="scope.row.avatar" class="url">
          </template>
        </el-table-column>
        <el-table-column
        prop="phonenumber"
        align="center"
        label="电话">
        </el-table-column>
        <el-table-column
        prop="loginIp"
        align="center"
        label="位置">
        </el-table-column>
        <el-table-column
        prop="createTime"
        align="center"
        width="100px"
        label="注册日期">
        </el-table-column>
        <el-table-column
        width="100"
        fixed="right"
        prop="address"
        align="center"
        label="操作">
            <template slot-scope="scope">
                <i class="el-icon-delete" style="font-size: 12px;color: #F56C6C;cursor:pointer;" @click="remove(scope.row.userId)">删除</i>
            </template>
        </el-table-column>
        </el-table>
        <!--分页栏-->
        <el-pagination
                background
                align="center"
                @size-change="handleSizeChange($event,111)"
                @current-change="data()"
                :current-page.sync="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>      
    </el-card>
    </div>
    
</template>

<script>
import { list,delUser,inquire } from '@/api/app_pages/user'
export default {
    components:{

    },
    data(){
         return {
          queryParams:{},
          tableData: [],
          size: 20,
          currentPage: 1,
          total: 0,
          dialogVisible: false,
          pickerOptions: {
              shortcuts: [{
                  text: '清空',
                  onClick(picker) {
                    picker.$emit('pick', []);
                  }
              }]
          },
          date:[]
        }
    },
    created(){
      this.data()  
    },
    methods:{
      data(){
        list(this.size,this.currentPage).then(res => {
          this.tableData = res.rows
          this.tableData.forEach(item =>{
            if(item.avatar.indexOf('/prod-api') != 0 && item.avatar.indexOf('http') != 0 && item.avatar.indexOf('https') != 0 ){
              item.avatar = process.env.VUE_APP_BASE_API+ item.avatar
            }
          })
          this.total = parseInt(res.total)
        })
      },
      handleSizeChange(val,e) {
          this.size = val
          this.data()
      },
      remove(id){
          delUser(id).then(res => {
            this.$message('删除成功')
            this.data()
          })
      },
      handleQuery(){
        if(this.date){
          this.queryParams.beginTime = this.date[0]
          this.queryParams.endTime = this.date[1]
        }
          
        this.queryParams.pageSize = this.pageSize
        this.queryParams.pageNum = this.pageNum
        inquire(this.queryParams).then(res =>{
            this.tableData = res.rows
            this.total = parseInt(res.total)
        })
      },
      resetQuery(){
          this.queryParams = {}
          this.date = []
      },
    }
}
</script>
<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    margin: 0 auto;
  }
  .url {
        width: 50px;
        height: 50px;
        display: block;
        margin: 0 auto;
    }
</style>
